<template>
    <div class="cont">
        <div class="datatitle">
            <p>审批概况</p>
            <div class="right"><span>全部审批</span><img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u443.svg" alt=""></div>
        </div>
        <div class="data">
            <img src="https://preview.axure6.com/194/images/%E5%B7%A5%E4%BD%9C%E5%8F%B0/u547.svg" alt="">
            <ul>
                <li>
                    <p class="txt1">890</p>
                    <p class="txt2">全部审批</p>
                </li>
                <li>
                    <p class="txt1">85</p>
                    <p class="txt2">审批中</p>
                </li>
                <li>
                    <p class="txt1">705</p>
                    <p class="txt2">已完成</p>
                </li>
                <li>
                    <p class="txt1">100</p>
                    <p class="txt2">已撤销</p>
                </li>
            </ul>
        </div>
        <p class="title">各类型审批数量</p>
        <div class="contechar" ref="contechar"></div>
    </div>
</template>

<script>
import * as echarts from 'echarts';


export default {
    mounted(){
        var chartDom = this.$refs.contechar;
        var myChart = echarts.init(chartDom);
        var option;

        option = {
        xAxis: {
            type: 'category',
            data: ['入职', '转正', '离职', '调薪', '请假', '调岗', '外出','加班', '补卡', '领用', '退库', '借用', '归还', '调拨'],
            axisLine: {
                onZero: false,
                show: false
            },
             axisTick: {
                show: false
            }
        },
        yAxis: {
            type: 'value',
            
        },
        series: [
            {
                data: [120, 200, 150, 80, 70, 110, 130,120, 200, 150, 80, 70, 110, 130],
                type: 'bar',
                barWidth: 20 , // 设置柱子宽度为20像素
                itemStyle: {
                    color: 'rgb(61,212,167)'
                },
            }
        ]
        };

        option && myChart.setOption(option);
            }
}
</script>

<style lang="scss" scoped>
.cont{
    width: 670px;
    height: 525px;
    background: inherit;
    padding: 20px 15px 0;
    background-color: rgba(255, 255, 255, 1);
    box-sizing: border-box;
    border-width: 1px;
    border-style: solid;
    border-color: rgba(242, 242, 242, 1);
    border-radius: 8px;
    .datatitle{
        display: flex;
        justify-content: space-between;
        box-sizing: border-box;
        p{
            text-align: left;
        }
        .right{
            font-weight: 400;
            font-style: normal;
            font-size: 12px;
            color: #999999;
            display: flex;
            align-items: center;
            img{
                margin-left: 5px;
            }
        }
    }
    .data{
        width: 630px;
        height: 100px;
        margin: 0 auto;
        position: relative;
        img{
            position: absolute;
            top: -19px;
            left: 0px;
            z-index: 0;
        }
        ul{
            display: flex;
            position: relative;
            padding: 0 50px;
            margin-top: 40px;
            box-sizing: border-box;
            justify-content: space-between;
            z-index: 0;
            li{
                .txt1{
                    height: 32px;
                    color: #333333;
                    font-weight: 700;
                    font-style: normal;
                    font-size: 20px;
                    line-height: 32px;
                }
                .txt2{
                    height: 32px;
                    line-height: 32px;
                    font-weight: 400;
                    font-style: normal;
                    font-size: 12px;
                    color: #999999;
                }
            }
        }
    }
    .title{
        font-size: 14px;
        font-weight: 400;
        font-style: normal;
        text-align: left;
    }
    .contechar{
        height: 330px;
    }
}
</style>